<template>
  <el-container class="home-container">
    <div id="postlist">
      <div class="plate_show">
        <div class="backgroup">
          <img style="width: 100%" src="../assets/lbutton.jpg" alt="" />
          <el-divider></el-divider>
          <div class="send_post" align="right">
            <el-button type="primary" @click="this.$router.push('/postsent')">发送留言</el-button>
          </div>
        </div>
      </div>

      <!-- <div class="post_list">
        <table>
          <thead>
            <tr>
              <td colspan="2">
                <span>全部主题</span>
                <span>最新</span>
                <span>热门</span>
                <span>热帖</span>
                <span>精华</span>
              </td>
              <td>作者</td>
              <td>回复/查看</td>
              <td>最后发表</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td style="width: 32px">
                <img
                  style="width: 32px"
                  src="../assets/images/文件图标.jpg"
                  alt=""
                />
              </td>
              <td>
                <span
                  ><a class="post_type" href="javascript:;">[帖子种类]</a></span
                >
                <a href="./postdetail">帖子标题</a>
              </td>
              <td style="width: 135px">
                <p>liuzi333</p>
                <p>2022-7-23 8:00</p>
              </td>
              <td style="width: 80px">
                <p>17</p>
                <p>103</p>
              </td>
              <td style="width: 135px">
                <p>lezai666</p>
                <p>2022-7-24 16:00</p>
              </td>
            </tr>
            <tr>
              <td style="width: 32px">
                <img
                  style="width: 32px"
                  src="../assets/images/文件图标.jpg"
                  alt=""
                />
              </td>
              <td><span>[帖子种类]</span>帖子标题</td>
              <td style="width: 135px">
                <p>liuzi333</p>
                <p>2022-7-23 8:00</p>
              </td>
              <td style="width: 80px">
                <p>17</p>
                <p>103</p>
              </td>
              <td style="width: 135px">
                <p>lezai666</p>
                <p>2022-7-24 16:00</p>
              </td>
            </tr>
            <tr>
              <td style="width: 32px">
                <img
                  style="width: 32px"
                  src="../assets/images/文件图标.jpg"
                  alt=""
                />
              </td>
              <td><span>[帖子种类]</span>帖子标题</td>
              <td style="width: 135px">
                <p>liuzi333</p>
                <p>2022-7-23 8:00</p>
              </td>
              <td style="width: 80px">
                <p>17</p>
                <p>103</p>
              </td>
              <td style="width: 135px">
                <p>lezai666</p>
                <p>2022-7-24 16:00</p>
              </td>
            </tr>
            <tr>
              <td style="width: 32px">
                <img
                  style="width: 32px"
                  src="../assets/images/文件图标.jpg"
                  alt=""
                />
              </td>
              <td><span>[帖子种类]</span>帖子标题</td>
              <td style="width: 135px">
                <p>liuzi333</p>
                <p>2022-7-23 8:00</p>
              </td>
              <td style="width: 80px">
                <p>17</p>
                <p>103</p>
              </td>
              <td style="width: 135px">
                <p>lezai666</p>
                <p>2022-7-24 16:00</p>
              </td>
            </tr>
            <tr>
              <td style="width: 32px">
                <img
                  style="width: 32px"
                  src="../assets/images/文件图标.jpg"
                  alt=""
                />
              </td>
              <td><span>[帖子种类]</span>帖子标题</td>
              <td style="width: 135px">
                <p>liuzi333</p>
                <p>2022-7-23 8:00</p>
              </td>
              <td style="width: 80px">
                <p>17</p>
                <p>103</p>
              </td>
              <td style="width: 135px">
                <p>lezai666</p>
                <p>2022-7-24 16:00</p>
              </td>
            </tr>
          </tbody>
        </table>
      </div> -->
      <center>
        <el-table :data="tableData.slice((currpage - 1) * pagesize, currpage * pagesize)" style="width: 95%">
          <!-- <el-table-column prop="CONTENTS_ID" label="帖子编号" width="32">
        </el-table-column> -->
          <el-table-column prop="TOPIC" label="书籍名称" width="135">
          </el-table-column>
          <el-table-column prop="USER_ID" label="用户ID" width="135">
          </el-table-column>
          <el-table-column prop="FORUM_CONTENT" label="内容"> </el-table-column>
          <el-table-column prop="COMMENTS_TIME" label="发帖时间" width="320">
          </el-table-column>
          <el-table-column label="操作" width="100" v-if="
            userid == 2052727 ||
            userid == 2052225 ||
            userid == 2052330 ||
            userid == 2054015 ||
            userid == 2053049 ||
            userid == 2052210 ||
            userid == 2052715 ||
            userid == 2051278 ||
            userid == 2053284 ||
            userid == 2053297
          ">
            <template #default="scope">
              <el-button type="danger" size="small" @click="Deleteforum(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </center>
      <div class="post_page">
        <el-pagination background layout="prev, pager, next, jumper" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :current-page="currpage" :page-size="pagesize"
          :total="tableData.length">
        </el-pagination>
      </div>
    </div>
  </el-container>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      tableData: [],
      userid: window.sessionStorage.getItem("userid"),
      curentPage1: 1, //默认最开始是第几页
      pagesize: 5, //每页数据条数
      currpage: 1, //默认开始页面
    };
  },
  mounted() {
    axios.get("/api/Forum/getForum").then((res) => {
      console.log("forum:", res);
      this.$data.tableData = res.data;
    });
  },
  methods: {
    handleSizeChange(val) {
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      this.currpage = val;
    },
    Deleteforum(index, row) {
      console.log("row", row);
      axios({
        method: "post",
        params: {
          commentid: row.CONTENTS_ID,
        },
        url: "api/Forum/deleteForum",
      }).then((res) => {
        console.log("submit", res);
        if (res.data == "") {
          this.$message({
            message: "删除成功,请刷新页面",
            type: "success",
          });
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.home-container {
  background-color: #f4f4f4;
  height: 100%;
}
.header ul {
  list-style-type: none;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgb(18, 18, 101);
}
.header ul li {
  float: right;
  border-right: 1px solid #bbb;
}
.header ul li:first-child {
  border-right: none;
}
.header ul li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/*鼠标移动到选项上修改背景颜色 */
.header ul li a:hover {
  background-color: #111;
}
.plate_show {
  width: 95%;
  margin: 20px auto;

}
.plate_show .backgroup {
  margin: auto;
}
.send_post .post_list {
  padding:5%;
  width: 100%;
}
.post_list {
  border: 1px solid #ccc;
  margin: 16px auto;
} 
/* .post_list table {
  border-collapse: collapse;
  width: 100%;
  font: size 14px;
}
.post_list table tr td {
  border-bottom: 1px solid#ccc;
  height: 40px;
}
.post_list table thead tr td {
  background-color: #eee;
  height: 40px;
}
.post_list table thead tr td span {
  margin-left: 16px;
  color: blue;
}
.post_list table tbody tr td span {
  color: blue;
  padding-right: 10px;
}
.post_list table tbody tr td p:last-child {
  color: #999;
} */
.post_page {
  text-align: right;
  margin-bottom: 36px;
  margin-top: 10px;
}
a.post_type {
  color: blue;
}
a {
  text-decoration: none;
  color: #fff;
}
a:hover {
  text-decoration: underline;
}
</style>
